<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->

		<link href="<%=request.getContextPath()%>/assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/font/css/font-awesome.min.css" />

		<!--[if IE 7]>
		  <link rel="stylesheet" href="<%=request.getContextPath()%>/font/css/font-awesome-ie7.min.css" />
		<![endif]-->

		<!-- fonts -->

		<link rel="stylesheet" href="<%=request.getContextPath()%>/assets/css/family_open_sans.css" />

		<!-- ace styles -->

		<link rel="stylesheet" href="<%=request.getContextPath()%>/assets/css/ace.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/indexSecond.css">
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/addActivity.css">
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/fileinput.css">
		<!--[if lte IE 8]>
		  <link rel="stylesheet" href="<%=request.getContextPath()%>/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="<%=request.getContextPath()%>/assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="<%=request.getContextPath()%>/assets/js/html5shiv.js"></script>
		<script src="<%=request.getContextPath()%>/assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

<body>
<div class="container-fluid"  style="position:relative;height:60px;">
	<nav class="navbar  navbar-fixed-top" style="position:absolute;" role="navigation" id="head">
		<div class="container">
	        <div class="navbar-header">
	            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	                <span class="sr-only">Toggle navigation</span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	            </button>
	        </div>
	        <div class="navbar-collapse collapse" id="navbar">
	        	
	        	<ul class="nav navbar-nav">
					<li><a href="<%=request.getContextPath()%>/index.do">首页</a></li>
					<li><a href="<%=request.getContextPath()%>/xqq.do">心情墙</a></li>
					<li><a href="<%=request.getContextPath()%>/xdjm.do">兄弟姐妹</a></li>
					<li style="border-bottom: 3px solid #fff;"><a href="<%=request.getContextPath()%>/jqhd.do">近期活动</a></li>
					<li><a href="<%=request.getContextPath()%>/yqlj.do">友情链接</a></li>
				</ul>
				<c:choose>
				<c:when test="${change=='0'}">
					<form action="" class="navbar-form navbar-right">
						<a data-toggle="modal" data-target="#myModal" class="btn btn-primary" href="">登录</a>
	                    <a class="btn btn-primary signup" href="">注册</a>
					</form>
				</c:when>
				<c:when test="${change=='1'}">
					<div class="after-login navbar-right">
						<div  class="col-sm-12 col-xs-12">
							<p>您好,用户:${member.membername}</p>
						</div>
						<div  class="modify col-sm-12 col-xs-12">
							<a data-toggle="modal" data-target="#changePsdModal" href="#">修改密码</a>
							<a data-toggle="modal" data-target="#changeMsgModal" href="#">修改信息</a>
							<a href="<%=request.getContextPath()%>/outlogin.do">注销</a>
						</div>
					</div>
				</c:when>
			 <c:when test="${change=='2'}">
					<div class="after-login navbar-right">
						<div  class="col-sm-12 col-xs-12">
							<p>您好,管理员:${member.membername}</p>
						</div>
						<div  class="modify col-sm-12 col-xs-12">
							<a data-toggle="modal" data-target="#changePsdModal" href="#">修改密码</a>
							<a data-toggle="modal" data-target="#changeMsgModal" href="#">修改信息</a>
							<a href="<%=request.getContextPath()%>/outlogin.do">注销</a>
						</div>
					</div>
				</c:when>
				</c:choose>
	        </div>
		</div>
	</nav>
</div>
<div class="container">
	<div class="panel panel-default">
	  	<div class="panel-heading">
	    	<h1>添加班级近期活动</h1>
	  	</div>
	  	 <form action="<%=request.getContextPath()%>/admin/addAtivity.do" method="post" enctype="multipart/form-data" >
		  	<div class="panel-body text-right">
			  		<div class="col-sm-12">
						<label class="col-sm-4 no-padding-right">活动标题:</label>
						<div class="col-sm-8">
							<input type="text" class="col-sm-6" placeholder="请输入标题" id="title" name="title">
						</div>
					</div>
					<div class="col-sm-12">
						<label class="col-sm-4 no-padding-right">创建人:</label>
						<div class="col-sm-8">
							<input type="text" class="col-sm-6" placeholder="请输入创建人" id="creater" name="creater">
						</div>
					</div>
					<div class="col-sm-12">
						<label class="col-sm-4 no-padding-right">活动时间:</label>
						<div class="col-sm-8">
							<input type="text" class="col-sm-6" placeholder="请输入新闻的具体时间" id="activitytime" name="activitytime">
						</div>
					</div>
					<div class="form-group">
                    	<input id="file" type="file" class="file" name="file">
                	</div>
				<div class="col-xs-12">
					<h4 class="header green clearfix">
						<span class="pull-left">活动内容</span>
						<span class="block pull-right">
							<small class="grey middle">选择样式: &nbsp;</small>
	
							<span class="btn-toolbar inline middle no-margin">
								<span data-toggle="buttons" class="btn-group no-margin">
									<label class="btn btn-sm btn-yellow">
										1
										<input type="radio" value="1" />
									</label>
	
									<label class="btn btn-sm btn-yellow active">
										2
										<input type="radio" value="2" />
									</label>
	
									<label class="btn btn-sm btn-yellow">
										3
										<input type="radio" value="3" />
									</label>
								</span>
							</span>
						</span>
					</h4>
				</div>
				<div class="col-sm-12 col-xs-12 text-left">
					<div class="wysiwyg-editor" id="editor1" ></div>
				</div>
				<div class="col-sm-offset-10 col-sm-1" style="margin-top: 30px;">
					<button type="submit" class="btn btn-sm btn-info" id="submit">提交</button>
				</div>
				<div class="col-sm-1" style="margin-top: 30px;">
					<button  class="btn btn-sm">取消</button>
				</div>
		  	</div>
		</form>
	</div>
</div>

		<!-- basic scripts -->

		<!--[if !IE]> -->

		<script src="<%=request.getContextPath()%>/assets/js/jquery-2.0.3.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
		<script src="<%=request.getContextPath()%>/assets/js/jquery-ui-1.10.3.full.min.js"></script>
		<![endif]-->

		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='<%=request.getContextPath()%>/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

				<!--[if IE]>
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='<%=request.getContextPath()%>/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
		</script>
		<![endif]-->

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='<%=request.getContextPath()%>/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="<%=request.getContextPath()%>/assets/js/bootstrap.min.js"></script>
		<script src="<%=request.getContextPath()%>/assets/js/typeahead-bs2.min.js"></script>
		<script src="<%=request.getContextPath()%>/assets/js/jquery.hotkeys.min.js"></script>
		<script src="<%=request.getContextPath()%>/assets/js/bootstrap-wysiwyg.min.js"></script>
		<script src="<%=request.getContextPath()%>/js/fileinput.js"></script>
		<script src="<%=request.getContextPath()%>/js/fileinput_locale_zh.js"></script>

		<!-- page specific plugin scripts -->

		<script src="<%=request.getContextPath()%>/assets/js/dropzone.min.js"></script>

		<!-- ace scripts -->

		<script src="<%=request.getContextPath()%>/assets/js/ace-elements.min.js"></script>
		<script src="<%=request.getContextPath()%>/assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
		
		</script>
		
		<script type="text/javascript">
			jQuery(function($){
    
    function showErrorAlert (reason, detail) {
        var msg='';
        if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
        else {
            console.log("error uploading file", reason, detail);
        }
        $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
         '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
    }

    //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons

    //but we want to change a few buttons colors for the third style
    $('#editor1').ace_wysiwyg({
        toolbar:
        [
            'font',
            null,
            'fontSize',
            null,
            {name:'bold', className:'btn-info'},
            {name:'italic', className:'btn-info'},
            {name:'strikethrough', className:'btn-info'},
            {name:'underline', className:'btn-info'},
            null,
            {name:'insertunorderedlist', className:'btn-success'},
            {name:'insertorderedlist', className:'btn-success'},
            {name:'outdent', className:'btn-purple'},
            {name:'indent', className:'btn-purple'},
            null,
            {name:'justifyleft', className:'btn-primary'},
            {name:'justifycenter', className:'btn-primary'},
            {name:'justifyright', className:'btn-primary'},
            {name:'justifyfull', className:'btn-inverse'},
            null,
            {name:'createLink', className:'btn-pink'},
            {name:'unlink', className:'btn-pink'},
            null,
            {name:'insertImage', className:'btn-success'},
            null,
            'foreColor',
            null,
            {name:'undo', className:'btn-grey'},
            {name:'redo', className:'btn-grey'}
        ],
        'wysiwyg': {
            fileUploadError: showErrorAlert
        }
    }).prev().addClass('wysiwyg-style2');


    $('[data-toggle="buttons"] .btn').on('click', function(e){
        var target = $(this).find('input[type=radio]');
        var which = parseInt(target.val());
        var toolbar = $('#editor1').prev().get(0);
        if(which == 1 || which == 2 || which == 3) {
            toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g , '');
            if(which == 1) $(toolbar).addClass('wysiwyg-style1');
            else if(which == 2) $(toolbar).addClass('wysiwyg-style2');
        }
    });


    

    //Add Image Resize Functionality to Chrome and Safari
    //webkit browsers don't have image resize functionality when content is editable
    //so let's add something using jQuery UI resizable
    //another option would be opening a dialog for user to enter dimensions.
    if ( typeof jQuery.ui !== 'undefined' && /applewebkit/.test(navigator.userAgent.toLowerCase()) ) {
        
        var lastResizableImg = null;
        function destroyResizable() {
            if(lastResizableImg == null) return;
            lastResizableImg.resizable( "destroy" );
            lastResizableImg.removeData('resizable');
            lastResizableImg = null;
        }

        var enableImageResize = function() {
            $('.wysiwyg-editor')
            .on('mousedown', function(e) {
                var target = $(e.target);
                if( e.target instanceof HTMLImageElement ) {
                    if( !target.data('resizable') ) {
                        target.resizable({
                            aspectRatio: e.target.width / e.target.height,
                        });
                        target.data('resizable', true);
                        
                        if( lastResizableImg != null ) {//disable previous resizable image
                            lastResizableImg.resizable( "destroy" );
                            lastResizableImg.removeData('resizable');
                        }
                        lastResizableImg = target;
                    }
                }
            })
            .on('click', function(e) {
                if( lastResizableImg != null && !(e.target instanceof HTMLImageElement) ) {
                    destroyResizable();
                }
            })
            .on('keydown', function() {
                destroyResizable();
            });
        }
        
        enableImageResize();

        /**
        //or we can load the jQuery UI dynamically only if needed
        if (typeof jQuery.ui !== 'undefined') enableImageResize();
        else {//load jQuery UI if not loaded
            $.getScript($path_assets+"/js/jquery-ui-1.10.3.custom.min.js", function(data, textStatus, jqxhr) {
                if('ontouchend' in document) {//also load touch-punch for touch devices
                    $.getScript($path_assets+"/js/jquery.ui.touch-punch.min.js", function(data, textStatus, jqxhr) {
                        enableImageResize();
                    });
                } else  enableImageResize();
            });
        }
        */
    }
      $('#submit').on('click', function() {
		  var hidden_input =
		  $('<input type="hidden" name="event" id="hid"/>').appendTo('#editor1');
       
		  var html_content = $('#editor1').html();
		  var outerText =  $('#editor1').wysiwyg()[0].outerText;
		  $("#hid").attr("value",outerText);
		  //put the editor's HTML into hidden_input and it will be sent to server
		});  
  		//获取编辑器
/*  	$('#editor1').blur(function() {
		  var hidden_input = $('<input type="hidden" name="my-html-content" id="hid"/>').appendTo('#editor1');
      
		  var html_content = $('#editor1').html();
		  hidden_input.val( html_content );
		  var x =  $('#editor1').wysiwyg()[0].outerText;
		  $("#hid").attr("value",x);
		  //put the editor's HTML into hidden_input and it will be sent to server
		});  */

});
</script>
<script src="<%=request.getContextPath()%>/js/msgtest.js"></script>
</body>
</html>
